<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Vue组件使用细节</title>
    <script src="../../vue.js"></script>
</head>

<body>
    <div id="app">
        <table><!-- 1. html5规定,有些标签下面只能使用指定的标签,其他的标签无法被识别,比如说table下有tbody,tbody下只能是tr,其他的就不会被正确识别,就是标签无法放在tbody下 -->
            <tbody>
                <tr is="item"></item> <!-- 3. 所以这里使用一个is属性,属性的值就是组件的id,这样的话就可以既不违反html5的规定,又能正确的使用组件来展示数据 -->
            </tbody>
        </table>
    </div>

    <script>
        Vue.component('item', { // 2. 使用vue组件的时候就不能直接将组件的id当做标签来展示数据了
            template: '<tr><td>haha</td></tr>'
        });
        const app = new Vue({
            el: '#app',

        })
    </script>
</body>

</html>